<template>
  <div class="theme-switch-container">
    <Tooltip title="切换主题模式">
      <div class="switch-wrapper">
        <Switch
          :checked="isDarkMode"
          @change="handleThemeToggle"
          checked-children="🌙"
          un-checked-children="☀️"
        />
      </div>
    </Tooltip>
  </div>
</template>

<script setup>
import { Switch, Tooltip } from 'ant-design-vue'

// 定义组件的属性
const props = defineProps({
  isDarkMode: {
    type: Boolean,
    required: true
  },
  themeTransition: {
    type: Boolean,
    default: false
  }
})

// 定义组件的事件
const emit = defineEmits(['update:isDarkMode', 'update:themeTransition', 'toggle'])

// 主题切换处理函数
const handleThemeToggle = (checked) => {
  // 设置过渡动画类
  emit('update:themeTransition', true)
  
  // 更新暗黑模式状态
  emit('update:isDarkMode', checked)
  
  // 触发切换事件
  emit('toggle', checked)
  
  // 300ms后移除过渡动画类
  setTimeout(() => {
    emit('update:themeTransition', false)
  }, 300)
}
</script>

<style scoped>
.theme-switch-container {
  display: flex;
  align-items: center;
}

.switch-wrapper {
  position: relative;
}

:deep(.ant-switch) {
  background-color: #d9d9d9;
  transition: background-color 0.3s ease;
}

:deep(.ant-switch-checked) {
  background-color: #1890ff;
}

:deep(.ant-switch-handle::before) {
  transition: all 0.3s ease;
}

:deep(.dark-mode) .ant-switch {
  background-color: #404040;
}

:deep(.dark-mode) .ant-switch-checked {
  background-color: #722ed1;
}
</style>